import React, { Component } from 'react'
import { Link, Route, Switch, Redirect } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Popconfirm, Button } from 'antd'
import './Home.less'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import MyBreadcrumb from '../../components/Breadcrumb'

import HomeRouter from './HomeRouter'

const { Header, Sider, Content } = Layout
const { SubMenu } = Menu

export default class Home extends Component {
  state = {
    collapsed: false,
    userMenus: [],
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  }

  componentDidMount() {
    const userMenus = JSON.parse(localStorage.userInfo).role.menus
    this.setState({
      userMenus,
    })
  }

  // 完美递归
  initMenu = (list) => {
    const { userMenus } = this.state
    const res = list.map((item) => {
      // if (userMenus.indexOf(item.path) != -1) {
      if (!item.children) {
        return (
          <Menu.Item key={item.path} icon={item.icon}>
            <Link className="list-group-item" to={item.path}>
              {item.name}
            </Link>
          </Menu.Item>
        )
      } else {
        return (
          <SubMenu key={item.path} icon={item.icon} title={item.name}>
            {this.initMenu(item.children)}
          </SubMenu>
        )
      }
      // }
    })
    return res
  }

  getRouteNode = (data) => {
    return data.map((v) => {
      if (v.component) {
        return (
          <Route exact path={v.path} component={v.component} key={v.path} />
        )
      } else {
        return v.children.map((item) => {
          return (
            <Route
              exact
              path={item.path}
              component={item.component}
              key={item.path}
            />
          )
        })
      }
    })
  }

  logOUt = () => {
    localStorage.clear()
    this.props.history.push('/login')
    // console.log(123)
  }

  render() {
    let cunrrentPath = this.props.location.pathname
    let userInfo = JSON.parse(localStorage.userInfo)
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[cunrrentPath]}
            defaultOpenKeys={['/home/product']}
            defaultSelectedKeys={['/home/product/category']}
          >
            {this.initMenu(HomeRouter)}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: this.toggle,
              }
            )}
            <Popconfirm title="确定要退出登录?" onConfirm={this.logOUt}>
              <span>欢迎您 {userInfo.account}</span>
              <Button style={{ marginRight: '40px', marginLeft: '10px' }}>
                退出登录
              </Button>
            </Popconfirm>
            {/* <MyBreadcrumb></MyBreadcrumb> */}
            {/* <div className="header">
              <span style={{ fontSize: '30px' }}>REACT商城</span>
            </div> */}
          </Header>

          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 0,
              minHeight: 280,
            }}
          >
            <Switch>
              {/* <Redirect exact from="/home" to="/home/chart"></Redirect> */}
              {this.getRouteNode(HomeRouter)}
            </Switch>
          </Content>
        </Layout>
      </Layout>
    )
  }
}
